<template>
  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
      <!-- 头部 -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-900">用户注册</h2>
        <button
          @click="$emit('close')"
          class="p-2 hover:bg-gray-100 rounded-md transition-colors duration-200"
        >
          <i class="w-5 h-5 text-gray-500 mdi:close" />
        </button>
      </div>

      <!-- 表单 -->
      <form @submit.prevent="handleRegister" class="p-6 space-y-4">
        <div>
          <label for="reg-username" class="block text-sm font-medium text-gray-700 mb-2">
            用户名 *
          </label>
          <input
            id="reg-username"
            v-model="form.username"
            type="text"
            required
            class="input w-full"
            placeholder="请输入用户名"
            :disabled="userStore.loading"
          >
        </div>

        <div>
          <label for="reg-email" class="block text-sm font-medium text-gray-700 mb-2">
            邮箱 *
          </label>
          <input
            id="reg-email"
            v-model="form.email"
            type="email"
            required
            class="input w-full"
            placeholder="请输入邮箱地址"
            :disabled="userStore.loading"
          >
        </div>

        <div>
          <label for="reg-password" class="block text-sm font-medium text-gray-700 mb-2">
            密码 *
          </label>
          <div class="relative">
            <input
              id="reg-password"
              v-model="form.password"
              :type="showPassword ? 'text' : 'password'"
              required
              class="input w-full pr-10"
              placeholder="请输入密码"
              :disabled="userStore.loading"
            >
            <button
              type="button"
              @click="showPassword = !showPassword"
              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
            >
              <i :class="showPassword ? 'mdi:eye-off' : 'mdi:eye'" />
            </button>
          </div>
          <p class="text-xs text-gray-500 mt-1">密码长度至少6位</p>
        </div>

        <div>
          <label for="reg-confirm-password" class="block text-sm font-medium text-gray-700 mb-2">
            确认密码 *
          </label>
          <div class="relative">
            <input
              id="reg-confirm-password"
              v-model="form.confirm_password"
              :type="showConfirmPassword ? 'text' : 'password'"
              required
              class="input w-full pr-10"
              placeholder="请再次输入密码"
              :disabled="userStore.loading"
            >
            <button
              type="button"
              @click="showConfirmPassword = !showConfirmPassword"
              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
            >
              <i :class="showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'" />
            </button>
          </div>
          <p v-if="form.password && form.confirm_password && form.password !== form.confirm_password" 
             class="text-xs text-red-500 mt-1">
            两次输入的密码不一致
          </p>
        </div>

        <div class="flex items-start">
          <input
            id="agree-terms"
            v-model="agreeTerms"
            type="checkbox"
            required
            class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-1"
          >
          <label for="agree-terms" class="ml-2 text-sm text-gray-600">
            我已阅读并同意
            <a href="#" class="text-blue-600 hover:text-blue-500">用户协议</a>
            和
            <a href="#" class="text-blue-600 hover:text-blue-500">隐私政策</a>
          </label>
        </div>

        <!-- 按钮组 -->
        <div class="flex space-x-3 pt-4">
          <button
            type="button"
            @click="$emit('close')"
            class="btn-secondary flex-1"
            :disabled="userStore.loading"
          >
            取消
          </button>
          <button
            type="submit"
            :disabled="userStore.loading || !isFormValid"
            class="btn-primary flex-1"
          >
            <i v-if="userStore.loading" class="animate-spin mr-2 mdi:loading" />
            {{ userStore.loading ? '注册中...' : '注册' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'

const emit = defineEmits<{
  close: []
}>()

const userStore = useUserStore()
const appStore = useAppStore()

const form = ref({
  username: '',
  email: '',
  password: '',
  confirm_password: ''
})

const showPassword = ref(false)
const showConfirmPassword = ref(false)
const agreeTerms = ref(false)

const isFormValid = computed(() => {
  return form.value.username &&
         form.value.email &&
         form.value.password &&
         form.value.confirm_password &&
         form.value.password === form.value.confirm_password &&
         form.value.password.length >= 6 &&
         agreeTerms.value
})

const handleRegister = async () => {
  if (!isFormValid.value) return

  const result = await userStore.register(form.value)
  
  if (result.success) {
    appStore.addNotification({
      type: 'success',
      title: '注册成功',
      message: result.message || '注册成功，请登录'
    })
    // 关闭模态框
    emit('close')
  } else {
    appStore.addNotification({
      type: 'error',
      title: '注册失败',
      message: result.message || '注册失败，请重试'
    })
  }
}


</script>